<template>
	<view class="container">
		<view class="content">
			<!-- 密码输入提示 -->
			<view class="password-prompt">
				<text class='password'>修改支付密码</text>
				<text class='password-text'>请设置支付密码，以验证身份</text>
			</view>

			<!-- 密码输入框 -->
			<view class="password-boxes">
				<view class="box" v-for="(box, index) in boxes" :key="index" :class="{ active: box.active }"></view>
			</view>
		</view>

		<!-- 数字键盘 -->
		<view class="keyboard" :style="{ transform: keyboardVisible ? 'translateY(0)' : 'translateY(100%)' }">
			<view class="row" v-for="(row, rowIndex) in keyboard" :key="rowIndex">
				<view class="key" v-for="(key, keyIndex) in row" :key="keyIndex" @click="handleKeyPress(key)" :class="{ 
		            'empty': key === '', 
		            'del-key': key === 'del',
		            'complete-key': key === '完成'
		          }">
					<image v-if="key === 'del'" class="del-icon" :src="delIcon" mode="aspectFit" />
					<text v-else>{{ key }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	// 密码框状态
	const boxes = ref(Array(6).fill().map(() => ({
		active: false
	})))
	let currentBox = 0
	import {
		ImgBaseUrl
	} from '@/utils/domain.js'
	// 删除图标路径 - 请替换为您的实际图标路径
	const delIcon = ref(`${ImgBaseUrl}keyPassword-icon.png`)

	// 键盘布局 - 将✅改为'del'表示删除
	const keyboard = ref([
		['1', '2', '3'],
		['4', '5', '6'],
		['7', '8', '9'],
		['del', '0', '完成']
	])

	// 控制键盘显示状态
	const keyboardVisible = ref(false)

	// 处理按键点击
	const handleKeyPress = (key) => {
		if (key === 'del') {
			// 删除按钮逻辑
			if (currentBox > 0) {
				currentBox--
				boxes.value[currentBox].active = false
			}
			return
		}

		if (key === '完成') {
			// 完成按钮逻辑
			handleComplete()
			return
		}

		if (currentBox < 6 && key !== '') {
			boxes.value[currentBox].active = true
			currentBox++

			// 当输入6位密码时自动触发完成
			if (currentBox === 6) {
				handleComplete()
			}
		}
	}
	
	// 处理完成逻辑
	const handleComplete = () => {
		// 检查是否输入了6位密码
		if (currentBox === 6) {
			const password = Array.from({
				length: 6
			}, (_, i) => {
				// 这里只是模拟获取密码，实际应用中需要根据实际存储方式获取
				return i + 1 // 实际项目中应替换为真实密码获取逻辑
			}).join('')
	
			console.log('输入的密码是:', password)
	
			// 密码验证逻辑可以在这里添加
			// 例如: 调用API验证密码
			// 验证成功后可以关闭键盘或导航到下一页
			// uni.navigateTo({ url: '/pages/success' })
	
			// 演示: 重置密码输入
			// resetPassword()
		} else {
			// 密码输入不完整时的提示
			uni.showToast({
				title: '请输入6位密码',
				icon: 'none',
				duration: 2000
			})
		}
	}

	// 获取输入的密码
	const getPassword = () => {
		return boxes.value.filter(box => box.active).length
	}

	// 重置密码输入
	const resetPassword = () => {
		boxes.value.forEach(box => box.active = false)
		currentBox = 0
	}

	// 显示键盘
	const showKeyboard = () => {
		keyboardVisible.value = true
	}

	// 组件挂载时显示键盘
	onMounted(() => {
		showKeyboard()
	})
</script>

<style scoped lang="scss">
	.container {
		height: 100vh;
		background: #fff;
		display: flex;
		flex-direction: column;
		position: relative;

		.content {
			padding: 20rpx;
			box-sizing: border-box;
			flex: 1;

			.password-prompt {
				display: flex;
				justify-content: space-between;
				// align-items: center;
				flex-direction: column;
				margin-bottom: 110rpx;
				height: 130rpx;
				padding: 0 10rpx;

				.password {
					font-weight: 500;
					font-size: 50rpx;
					color: #303133;
				}

				.password-text {
					font-weight: 400;
					font-size: 28rpx;
					color: #303133;
				}
			}

			.password-boxes {
				display: flex;
				justify-content: center;
				margin-bottom: 80rpx;

				.box {
					width: 100rpx;
					height: 140rpx;
					background: #F1F1F1;
					border-radius: 10rpx;
					margin: 0 10rpx;
					position: relative;

					&.active::after {
						content: "•";
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						font-size: 60rpx;
						color: #333;
					}
				}
			}

			.forget-password {
				width: 100%;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				text-align: right;
			}
		}
	}

	.keyboard {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #E9E9E9;
		padding: 15rpx;
		box-sizing: border-box;
		transform: translateY(100%);
		transition: transform 0.3s ease-in-out;

		.row {
			display: flex;
			justify-content: center;
			margin-bottom: 20rpx;

			.key {
				width: 230rpx;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				margin: 0 10rpx;
				font-size: 40rpx;
				font-weight: bold;

				&.empty {
					background-color: transparent;
				}

				&:active {
					background-color: #e0e0e0;
				}

				&.del-key {
					background-color: #D3D3D3;
				}

				&.complete-key {
					// width: 690rpx; // 占满一行的宽度
					background-color: #07C160;
					color: white;
				}

				.del-icon {
					width: 80rpx;
					height: 70rpx;
				}
			}
		}
	}

	.keyboard.show {
		transform: translateY(0);
	}
</style>